<template>
    <div class="main">
      <div class="main-header">
        <div class="main-title">
            <h1 :class="{animate:isShow,wo:isHidden}">我们的产品和服务</h1>
            <p :class="{animate2:isShow,wo:isHidden}">采用100%纯有机肥料</p>
        </div>
        <div class="product">
          <div class="left">
            <div>
                <section :class="{animate:isShow,wo:isHidden}">优质</section>
                <nav :class="{animate:isShow,wo:isHidden}">香蕉片</nav>
                <p :class="{animate:isShow,wo:isHidden}">我们刚刚向我们的网上商店添加了</p>
                <p :class="{animate:isShow,wo:isHidden}">各种新产品。来看看吧！</p><br>
                <a href="">More</a>
            </div>
            <div>
                <img :class="{animate:isShow,wo:isHidden}" src="../assets/images/banana.png" alt="">
            </div>
          </div>
            <div class="right">
                <div>
                <section :class="{animate2:isShow,wo:isHidden}">新有机</section>
                <nav :class="{animate2:isShow,wo:isHidden}">新产品</nav>
                <p :class="{animate2:isShow,wo:isHidden}">我们刚刚向我们的网上商店添加了</p>
                <p :class="{animate2:isShow,wo:isHidden}">各种新产品。来看看吧！</p><br>
                <a href="#">More</a>
            </div>
            <div>
                <img :class="{animate2:isShow,wo:isHidden}" src="../assets/images/newPro.png" alt="">
            </div>
            </div>
        </div>
      </div>
      <div class="main-footer">
        <div class="content" :class="{animate:isShow,wo:isHidden}">
            <p>
            <img src="../assets/images/引号.png" alt="">&nbsp;
            我们提供优质的有机产品。
            </p>
            <section>作为Rich Harverst的业主，我亲自处理我们为客户和合作伙伴提供的产品。
            我认为我们成功的主要原因是质量不断高。</section>
        </div>
      </div>   
    </div>
     
</template>

<script>
    export default {
        data(){
            return {
                isShow:false,
                isHidden:true  
            }
        }, 
        mounted(){
            window.addEventListener('scroll',function(){ 
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
                if(scrollTop >= 300){
                   this.isShow = true;
                   this.isHidden = false;
            }
        }.bind(this))
    }
}
    
</script>

<style scoped>
a{text-decoration:none;color: rgb(255, 255, 255);}
    .main{
        height:830px;
        margin-top:30px;
        background-image:url(../assets/images/oldperson.jpg) ;
        background-size:100% auto;
        overflow:hidden;
        background-attachment:fixed;
    }
    .main-header{
        height:500px;
        border:1px solid white;
        background:#FFFFFF;  
    }
    .main-title{
        width:80%;
        margin: 30px auto;
        text-align:center;
    }
    .main-title h1{
        font-weight:normal;
    }
    .product{
        width:80%;
        height:336px;
        margin: 20px auto;
    }
    .product .left{
        width:48%;
        height:80%;
        float:left;
        background:#fafafa;
        display:flex;
        justify-content:space-around;
    }
    .product .right{
        width:48%;
        height:80%;
        float:right;
        background:#fafafa;
        display:flex;
        justify-content:space-around;
    }
    .product .left  div{
        width:40%;
        height:78%;
        margin-top:30px;
        padding-left:30px;
    }
    .product .right  div{
        width:40%;
        height:78%;
        margin-top:30px;
        padding-left:30px;
    }
    .product section{
        color: rgb(65, 168, 95);
        font-size:14px;
        margin:8px 0;
    }
    .product nav{
        font-size:22px;
    }
    .product p{
        color: #565a5b;
        font-size:14px;
        font-family: 'Microsoft YaHei',微软雅黑,'MicrosoftJhengHei',华文细黑,'STHeiti,MingLiu';
    }
    .product img{
        width:100%;
        height:100%;
    }
    .product a{
        padding: 12px 30px 12px 30px;
        border-radius: 50px;
        background:#21cd30;
    }
    .product a:hover{
        opacity:.8;
    }
    .main-footer{
        width:80%;
        margin: 0 auto;
    }
    .main-footer .content{
        width:45%;
        margin:120px 0 120px 140px;
    }
    .main-footer .content p{
        margin:0;
        padding:0;
        color: rgb(255, 255, 255);
        font-size: 36px;
    }
    .main-footer .content section{
        color: rgb(255, 255, 255);
        font-size:14px;
    }
</style>